<template>
	<view>
		<view class="title">登录</view>
		<view class="loginform">
			<view class="loginform-item">
				<text class="number-title">+86</text>
				<image class="down-icon" src="../../static/down.png">
				<input maxlength="11" type="number" placeholder="请输入您的手机号" placeholder-class="placeholderClass" v-model="mobile" />
			</view>
			<view class="loginform-item">
				<input class="textleft" password placeholder="请输入密码" placeholder-class="placeholderClass" v-model="password"/>
			</view>
			<view class="btnbox">
				<button @click="loginGetCode">登录</button>
			</view>
		</view>
		<view class="rule">
		<label class="radio"><radio value="r1" color="#37C2BC"  checked="" />选中</label>
		
		<text>进入即代表同意</text>
		<text class="blue" @click="kf(1)">用户协议</text>和<text class="blue" @click="kf(2)">隐私协议</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'',
				password:'',
				provider:'',
				code:'',
				enter:''
			}
		},
		onLoad(option) {
			if(option.enter){
				
				this.enter = option.enter;
			}
		},
		methods: {
			
			kf(type){
				
				if(type == 1){
					uni.navigateTo({
						url:'../usercenter/kf?url='+encodeURIComponent("https://mp.weixin.qq.com/s/8YPnaRfKZl9gaYJvlOFSnA")
					})
				}else{
					uni.navigateTo({
						url:'../usercenter/kf?url='+encodeURIComponent("https://mp.weixin.qq.com/s/8YPnaRfKZl9gaYJvlOFSnA")
					})
				}
			},
			getCode() {
				let _this = this;
				uni.showLoading({
					title: "授权获取中"
				})
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						if (provider == 'weixin') {
							provider = "wechat";
						}
						_this.provider = provider;
						_this.$util.$setStorageSync("provider", provider)
					},
					fail: function(res) {
						uni.hideLoading();
					}
				});
				uni.login({
					provider: _this.$util.$getStorageSync("provider"),
					success: function(loginRes) {
						let code = loginRes.code;
						_this.code = code;
						uni.hideLoading();
						_this.login();
						console.info(code)
			
					},
					fail: function(res) {
						uni.hideLoading();
			
					}
				})
			},
			
			loginGetCode(){
					
					this.getCode();
			},
			login(){
				let param = {
					mobile: this.mobile,
					password: this.password,
					code:this.code
				}
				let that = this;
				this.$api.login(param).then(res => {
					
					if(res.code == 1){
						let token = res.data.token;
						let username = res.data.username;
						let mobile = res.data.mobile;
						let avatar = res.data.avatar;
						
						that.$util.$setStorageSync("token", token);
						that.$util.$setStorageSync("username", username);
						that.$util.$setStorageSync("mobile", mobile);
						that.$util.$setStorageSync("avatar", avatar);
						if(this.enter == 'register'){
							uni.switchTab({
								url:'../index/index'
							})
						}else{
							uni.navigateBack({
								delta:1
							})
						}
						
					}else{
						that.$util.$showToast(res.msg, '', 'none');
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.title{
	margin: 62rpx 94rpx;
	font-size:54rpx;
	color: $uni-text-color;
}
.loginform{
	margin:95rpx 95rpx;
	.loginform-item{
		border-bottom: 1rpx solid #EFEFEF;
		display: flex;
		height: 135rpx;
		line-height: 135rpx;
		.down-icon{
			width: 30rpx;
			height: 30rpx;
			margin-top: 52rpx;
			margin-right: 20rpx;
		}
		.number-title{
			font-size: 30rpx;
			color: #666666;
		}
		input{
			margin-top: 52rpx;
			text-align: center;
			font-size: 32rpx;
			color: #454545;
		}
		.textleft{
			text-align: left;
		}
	}
}
.rule{
	position: absolute;
	bottom: 120rpx;
	width: 100%;
	text-align: center;
	color: $uni-text-color-grey;
	font-size: 24rpx;
	text{
		font-size: 24rpx;
		color: $uni-text-color-grey;
	}
	.blue{
		color: $uni-color-primary;
		text-decoration: underline;
		margin-left: 10rpx;
	}
}
.btnbox{
	margin-top: 69rpx;
}
</style>
